<template>
  <div class="father">
    <h3>父组件</h3>
    <!-- v-modle 的本质 -->
    用户名：<input v-model="userName" />

    <!--
      v-model 的本质是下面这行代码  需要再加一个事件处理
       是否是这个意思呢 通过一个输入事件 将 userName 改了
       取得是 事件目标的值来替换 userName
      -->
    本质用户名：<input type="text" :value="userName" @input="userName = (<HTMLInputElement>$event.target).value" />
    <br>
    <h2>子组件：</h2>
    默认的 v-model 默认为 modelValue
    <!-- <AtguiguInput v-model:modelValue="userName"></AtguiguInput> -->
    <AtguiguInput v-model:abc="userName" v-model:xyz="address"></AtguiguInput>
    <!-- 在 model 上使用 v-model 的底层原理 -->
    <!-- <AtguiguInput :modelValue="userName" @update:model-value="userName = $event"></AtguiguInput> -->

  </div>
</template>

<script setup lang="ts" name="Father">

import { ref } from 'vue'
import AtguiguInput from './AtguiguInput.vue';

let userName = ref('xiaosong')
let address  = ref('二仙桥')

</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
